<%--
  Created by IntelliJ IDEA.
  User: 87070
  Date: 2022/10/27
  Time: 9:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css" >
  <script src="${pageContext.request.contextPath}/static/echarts.js"></script>

</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="recond" >回访记录</a>
  <%--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
</script>

<form class="layui-form" action=""  id="saveRecondForm" style="display: none"  lay-filter="updateUserFormFilter">
  <input type="hidden" name="did" >
  <input type="hidden" name="uid" value="${user.id}" >
  <form class="layui-form" enctype="multipart/form-data" action="" >

    <div class="registerbox-title">mht测试回访添加</div>
    <div class="layui-form-item">
      <div class="layui-form-item pass" >
        <label class="layui-form-label">用户id</label>
        <div class="layui-input-inline">
          <input type="text" name="id" autocomplete="off" disabled="none"
                 class="layui-input" id="id">
        </div>
      </div>
    </div>

    <div class="layui-form-item pass" >
      <label class="layui-form-label">回访内容</label>
      <div class="layui-input-inline">
        <input type="text" name="recond"   lay-verify="required" placeholder="请输入回访内容" autocomplete="off"
               class="layui-input" id="recond">
      </div>
    </div>
    <div class="layui-form-item " >
      <label class="layui-form-label">测试计划邀请码</label>
      <div class="layui-input-inline">
        <input type="text" name="yqcode"  lay-verify="required" placeholder="请输入测试计划id" disabled="none"
               autocomplete="off" class="layui-input" id="yqcode">
      </div>
    </div>

    <div class="layui-form-item " >
      <label class="layui-form-label">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="remark"  lay-verify="required" placeholder="请输入备注"
               autocomplete="off" class="layui-input" id="remark">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formSaveRecond">注册</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>

<div>
  <div id="right" style="width: 1400px; float: left;margin-left:40px">

    <%--查询框--%>
    <%--查询条件--%>
    <form class="layui-form" action="">

      <div class="layui-inline">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
          <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
          <input type="text" name="tel" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">邀请码</label>
        <div class="layui-input-inline">
          <input type="text" name="yqcode" placeholder="请输入邀请码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">性格类型</label>
        <div class="layui-input-block">
          <select name="type"  class="layui-select">
            <option value="">请选择...</option>
            <option value="废除">废除</option>
            <option value="学习焦虑">学习焦虑</option>
            <option value="对人焦虑">对人焦虑</option>
            <option value="孤独倾向">孤独倾向</option>
            <option value="自责倾向">自责倾向</option>
            <option value="过敏倾向">过敏倾向</option>
            <option value="身体症状">身体症状</option>
            <option value="恐怖倾向">恐怖倾向</option>
            <option value="冲动倾向">冲动倾向</option>
            <option value="全量表异常">全量表异常</option>
          </select>
        </div>

      </div>



      <div class="layui-inline">
        <div class="layui-input-inline">
          <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>

    <%--查询条件结束--%>
    <%--存放一个table--%>
    <table class="layui-hide" id="test2" lay-filter = "test2"></table>
  </div>
  <div style="width: 1400px;height:700px;float: left;">
    <div id="main" style="width: 800px;height:200px;"></div>
    <div id="circlemain" style="width: 800px;height:200px;"></div>
    <div id="left" style="width: 600px;height:280px; position: relative;top:-400px;left:800px">
      <table class="layui-hide" id="test" lay-filter = "test"></table>
    </div>
  </div>
</div>
<%--存放一个table--%>
<script src="${pageContext.request.contextPath}/static/jquery-3.6.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
<script >



  layui.use(['table','layer','form','jquery','tree'], function(){
    var tree = layui.tree;
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.jquery;
    var namestatus=true;

    var colordata=[];
    var countdata=[];
    var cicledata=[];


    table.render({
      // element  元素
      elem: '#test'
      ,url:'${pageContext.request.contextPath}/tmhttongji/getnum' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
      //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,cols: [[
        // {type: 'checkbox', fixed: 'left'}
        {type:'numbers',title:'编号'}
        // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
        ,{field:'type', title: '类型', sort: true}
        ,{field:'count', title: '数量', sort: true}
        // ,{fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
      ]],
      done: function(res, curr, count){

        //如果是异步请求数据方式，res即为你接口返回的信息。
        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
        //alert(JSON.stringify(res.data));

        res.data.forEach(function (item){
          colordata.push(item.type);
          countdata.push(item.count);
          var obj={};
          obj["value"]=item.count;
          obj["name"]=item.type;
          cicledata.push(obj);
        })
        // 数据渲染完之后开始显示echart的图
        getEchartPic1();
        getEchartPic2();
      }

    });
    table.render({
      // element  元素
      elem: '#test2'
      ,page:true
      ,limit:10
      ,limits:[10,20,30]
      ,toolbar: '#toolbarDemo'
      ,url:'${pageContext.request.contextPath}/tmhttongji/queryall' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,parseData: function (res) {
        return {
          "code":res.code,
          "msg":res.msg,
          "count": res.data.total,//从返回的json数据中取出总行数
          "data": res.data.list//返回的json数据有两层，layui不支持多层数据，所以是res.list
        }
      }
      ,cols: [[
        // {type: 'checkbox', fixed: 'left'}
        {type:'numbers',title:'编号'}
        // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
        ,{field:'id', title: '测试者id', sort: true}
        ,{field:'username', title: '用户名', sort: true}
        ,{field:'tel', title: '电话', sort: true}
        ,{field:'yqcode', title: '邀请码', sort: true}
        ,{field:'createtime', title: '做题时间', sort: true}
        ,{field:'void', title: '效度评估', sort: true}
        ,{field:'LearningAnxiety', title: '学习焦虑', sort: true}
        ,{field:'AboutPeople', title: '对人焦虑', sort: true}
        ,{field:'LonelinessTendency', title: '孤独倾向', sort: true}
        ,{field:'SelfReproachTendency', title: '自责倾向', sort: true}
        ,{field:'AnaphylacticTendency', title: '过敏倾向', sort: true}
        ,{field:'PhysicalSymptoms', title: '身体症状', sort: true}
        ,{field:'TerroristTendency', title: '恐怖倾向', sort: true}
        ,{field:'ImpulsiveTendency', title: '冲动倾向', sort: true}
        ,{field:'total', title: '全量表总分', sort: true}
        ,{fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
      ]]

    });

    //监听行工具事件
    table.on('tool(test2)', function(obj){
      var data = obj.data;
      //console.log(obj)
       if(obj.event == 'recond'){
        layer.open({
          type: 1,
          area: ['1000px', '800px'],
          offset: '100px',
          content:$("#saveRecondForm"),
        });
        form.val('updateUserFormFilter',data)
      }
    });

    form.on('submit(formSaveRecond)', function(data){
      alert(1111);
        $.ajax({
          url:"${pageContext.request.contextPath}/tmhtrecond/add",
          type:"post",
          dataType:"JSON",
          data:data.field,//表单里所有数据
          success:function (ret){
            alert(ret.data)
            if (ret.data == true){
              //关闭所有弹框
              layer.closeAll();
              //隐藏表单
              $("#formSaveUser").hide();
              //刷新页面
              table.reload('test2');
              $("#saveRecondForm").hide();
            }else if(ret.data == 0) {
              window.location="${pageContext.request.contextPath}/view/ShowTmhtRecond.jsp"
            }
          }
        })
      return false;
    });


    // 查询
    form.on('submit(formDemo)', function(data){
      console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
      console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      table.reload('test2', {
        where: data.field,
        page: {
          curr: 1 //重新从第 1 页开始
        },
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });


    var getEchartPic1=function (){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '性格分析数据'
        },
        tooltip: {},
        legend: {
          data: ['性格人数']
        },
        xAxis: {
          data: colordata
        },
        yAxis: {},
        series: [
          {
            name: '性格人数',
            type: 'bar',
            data: countdata

          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    // 饼状图的填充
    var getEchartPic2=function (){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('circlemain'));

      // 指定图表的配置项和数据
      option = {
        title: {
          text: '性格测试分析数据',
          // subtext: '分析数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        color:["#FFB5B5","#93FF93","#ACD6FF","#FFFFCE","#EBD3E8","#AAAAAA","#BBBBBB","#CCCCCC","#DDDDDD","#EEEEEE"],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data:cicledata
            // data: [
            //     { value: 1048, name: 'Search Engine' },
            //     { value: 735, name: 'Direct' },
            //     { value: 580, name: 'Email' },
            //     { value: 484, name: 'Union Ads' },
            //     { value: 300, name: 'Video Ads' }
            // ]
            ,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }


  })


</script>
</body>


</html>
